<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this情况</title>
</head>

<body>
  <h1>this情况</h1>
  <script>
    /*
      this情况
        1、以函数形式调用时，this永远都是window
        2、以方法的形式调用时，this指向调用方法的对象
        3、已构造函数的形式调用时，this指向新创建的对象
        4、使用call()和apply()调用时，this指向参数指定的对象
    */
  </script>
  <!-- 
    1、this是什么
      * 任何函数本质上都是通过对象来调用的，如果没有直接就是window
      * 所有函数内部逗游一个变量this
      * 它的值是调用函数的当前对象
    2、如何确定this的值
      * test():window
      * p.test():p
      * new test():新的对象
      * p.call('obj'):obj
   -->
  <script>
    function Person(color){
      console.log(this)
      this.getColor = function (){
        console.log(this)
        return this.color
      }
      this.setColor = function(color){
        console.log(this)
        this.color = color
      }
    }

    Person('red')//this=>window
    var p = new Person('yellow')//this=>p
    p.getColor()//this=>p
    var obj = {}
    p.setColor.call(obj,'black')//this=>obj

    var test = p.setColor
    test()//this=>window
    function fun1(){
      function fun2(){
        console.log(this)
      }
      fun2()
    }
    fun1()//this=>window
  </script>
</body>

</html>